/*
* @Author: Administrator
* @Date:   2018-09-09 19:58:25
* @Last Modified by:   Administrator
* @Last Modified time: 2018-09-12 20:03:55
*/
import React from 'react';
import { Link } from 'react-router-dom';
import { ListItem, ListInfo, ListIcon, LoadMore } from '../style.js';
import { connect } from 'react-redux';
import { actionCreators } from '../store'

class List extends React.Component {
  render () {
  	const { list, getMore,page } = this.props;
  	return (
  		<div>
  		  {
	        list.map((item,index) => {
	        	return (
	           <Link key={index} to={'/details/' + item.get('id')}>
                <ListItem>
		          <img className="list-img" src={item.get('imgUrl')} />
		          <ListInfo>
			          <h3 className="list-title">{item.get('title')}</h3>
			          <p className="list-contain">{item.get('contain')}</p>
			          <ListIcon>
			            <a className="icon-title">{item.get('smallTitle')}</a>
			            <i className="iconfont song">&#xe627; 22</i>
		              <i className="iconfont qi">&#xe637; 17</i>
			          </ListIcon>
		          </ListInfo>
		        </ListItem>
		        </Link>
	        	)
	        })
  		  }
  		  <LoadMore onClick={() => {getMore(page)}}>加载更多内容</LoadMore>
      </div>
  	)
  } 
}
const mapState = (state) => ({
	list: state.get('home').get('articelList'),
	page: state.getIn(['home','articlePage'])
});
const mapDispatch = (dispatch) => ({
	getMore (page) {
		dispatch(actionCreators.getMoreList(page))
	}
});

export default connect(mapState,mapDispatch)(List);